<template>
    <div id="container-map"></div>
</template>
<script lang="ts">
import { defineComponent, ref, onMounted , reactive , toRaw , watch } from 'vue'
import AMapLoader from '@amap/amap-jsapi-loader'
export default defineComponent( {
    name: 'v-map-t',
    components: {},
    props: {
        detailInfo: {
            type: String,
            default: ''
        },
        isUseDialog: {
            type: String,
            default: ''
        }
    },
    setup(props){
        const map:any = ref(null)
        const AMap:any = ref(null)
        let getInfo:any = {}

		const initMap = async() => {
			try {
				let AMaps = await AMapLoader.load({
					key: "60325c6451fa7d3637f4c862898cc342", // 申请好的Web端开发者Key，首次调用 load 时必填
					version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
					plugins: [
						'AMap.CircleEditor',
						'AMap.PolygonEditor',
						'AMap.Polygon',
						'AMap.PolyEditor',
						'AMap.ToolBar',
						'AMap.Scale',
						'AMap.OverView',
						'AMap.MapType',
						'AMap.Geolocation',
						'AMap.AutoComplete',
						'AMap.PlaceSearch',
                        'AMap.Geocoder',
					], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
				})
				map.value = new AMaps.Map("container-map", { //设置地图容器id
					viewMode: "2D", //是否为2D地图模式
					zoom: 17, //初始化地图级别
					// center: [113.75842 , 23.02731 ], //初始化地图中心点位置
                    resizeEnable: true,
				})
			} catch (err) {
				console.log(err)
			}
		}

        /*** onMounted 页面加载时显示 */
        onMounted(async() => {
            let setTime = setInterval(() => {
                initMap()
                if(toRaw(map.value)){
                    clearInterval(setTime)
                }
            },20)
        })

        return {}
    },
} )
</script>
<style scoped lang="scss">
</style>